<template>
  <div id="main">
    <el-form :inline="true" >
      <el-form-item label="楼栋号">
        <el-select v-model="isOutOf"   placeholder="请选择楼栋号">
          <el-option
            v-for="item in mididea"
            :key="item.f_name"
            :label="item.f_name"
            :value="item.f_name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="greenButton" type="primary" @click="onQuery">查询</el-button>
        <el-button class="greenButton" type="primary" @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item style="float:right;">
          <el-button type="primary" class="greenButton" @click="dleMany()">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-table
      border
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      style="width: 100%;border:1px solid #00BDAC;"
      height="78%"
      :data="buildingList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      :header-cell-style="{borderRight:'none',backgroundColor:'#00BDAC',color:'#FFFFFF'}"
    >
      <el-table-column
      type="selection"
      width="55">
      </el-table-column>
      <el-table-column align="center" type="index" :index="table_index" label="序号" width="50px"></el-table-column>
      <el-table-column align="center" prop="f_name" label="楼栋号"></el-table-column>
      <el-table-column align="center" label="楼层数">
        <template slot-scope="scope">
         <span>{{scope.row.sub.length}}</span>
        </template>
        
      </el-table-column>
      <el-table-column align="center" label="修改信息">
        <template slot-scope="scope">
          <el-button size="mini" class="greenButton" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handeldel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        layout="total,prev, pager, next, jumper"
        :total="buildingList.length"
        prev-text="上一页"
        next-text="下一页"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="isShowEdit"
      destroy-on-close
      :show-close="false"
      class="edit-dialog"
      width="1100px"
    >
      <div slot="title" class="edit-dialog-title">编辑楼栋信息</div>
      <el-form class="edit-form" label-width="120px" label-position="left">
        <el-form-item label="楼栋名称：" class="edit-form-item-with-des">
          <el-input class="edit-form-input" v-model="editFormData.buildingNum" placeholder="输入楼栋名称"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="cancel" class="pinkButton" type="primary">取消</el-button>
        <el-button @click="submit" class="greenButton" type="primary">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data (){
    return {
        isOutOf: "",
      roofOptions: [],

      roomOptions: [
        {
          value: "1",
          label: "101"
        },
        {
          value: "2",
          label: "102"
        }
      ],

      buildingList: [],
      mididea:[],

      currentPage: 1,
      pagesize:10,
      isShowDetail: false,

      detailTable: [
        {
          person: "张三",
          route: "1号线",
          pointOne: "1号楼 正常签到",
          pointTwo: "2号楼 正常签到",
          pointThree: "3号楼 正常签到",
          status: "正常"
        }
      ],

      isShowEdit: false,

      editFormData: {
        buildingNum: ""
      },

      orderRulesOptions: [],
      hideid:'',
      multipleSelection:[],
    };
  },
  mounted(){
    this.huoqu();

  },

  methods: {
    dleMany(){
      console.log(this.multipleSelection)
      if(this.multipleSelection.length==0){
        return this.$message.error('请选择您要删除的信息')
      }
      const arr = []
      this.multipleSelection.forEach((item)=>{
          arr.push(item.id)
      })
      console.log(arr.join(','))
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let parme = {
                id:arr.join(',')
              }
              console.log(parme)
              this.ajaxCommon.ajax({
                    url: 'piliangfloordelete',
                    data:parme,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                         this.huoqu();

                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration:'2000'
                          });
                      }else{
                        this.$message({
                            message: res.status,
                            type: 'error',
                            duration:'2000'
                          });

                      }
                     
                    }
                });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
    },
    handleSelectionChange(selection){
        console.log(selection)
        this.multipleSelection = selection
    },

     table_index(index){
        return (this.currentPage -1) * this.pagesize + index + 1
    },  

    // 获取
    huoqu(){
      console.log(111111111111111)
       this.ajaxCommon.ajax({
                    url: 'loulist',
                    success: (res) => {
                      console.log('获取',res)
                      if(res.code == 200){
                        this.buildingList = res.data;
                        this.mididea = res.data;
                        console.log(this.buildingList,'-----------',res.data)
                      }else{

                      }
                    }
                });
    },
    reset(){
      this.isOutOf = ''
      this.buildingList = this.mididea;
    },
    onQuery() {
      console.log(this.isOutOf);
      let arr = [];
      if(this.isOutOf){
         this.mididea.forEach(item =>{
        if(this.isOutOf == item.f_name){
           arr.push(item);
        }
      })
      this.buildingList = arr;
      }else{
        this.buildingList = this.mididea;
      }
      

    },
    onDetailclick(row) {
      this.isShowDetail = true;
      console.log(row);
    },
    handleRemind(row) {
      console.log(row);
    },
    handleCancel(row) {
      console.log(row);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handeldel(row){
        this.open(row.id)
    },
     open(id) {
        this.$confirm('确定要删除该条信息吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {
            lou_id:id
          }
          this.ajaxCommon.ajax({
                    url: 'dellou',
                    data: param,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                            this.$message({
                               type: 'success',
                               message: '删除成功!'
                             });
                             this.huoqu();
                      }else{
                        this.$message({
                               type: 'error',
                               message: res.status
                             });
                        this.huoqu();
                      }
                    }
                });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    handleDelete() {},
    handleEdit(row) {
      console.log(row)
      this.isShowEdit = true;
      this.editFormData.buildingNum = row.f_name;
      this.hideid = row.id;
    },
    submit() {
      this.isShowEdit = false;
      let param = {
         id:this.hideid,
         f_name:this.editFormData.buildingNum
      }
      this.ajaxCommon.ajax({
                    url: 'xiulou',
                    data: param,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.$message({
                          type: 'success',
                          message: '修改成功'
                        }); 
                        this.huoqu();
                      }
                      
                     
                    }
                });

    },
    cancel(){
      this.isShowEdit = false;
    }
  }
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  height: 100%;
}

a {
  color: #00bdac;
  text-decoration: none;
}

.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.edit-dialog-title {
  color: #ffffff;
  padding-left: 30px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  background: #00bdac;
}

/* .edit-form {
  width: 530px;
} */

.message-button {
  text-align: right;
}

.edit-form-input {
  width: 260px;
}

.edit-form-item-with-des {
  span {
    margin: 0 20px;
    display: inline-block;
    min-width: 30px;
  }
}
</style>

<style lang="less">
.detail-dialog {
  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 0;
    height: 410px;
  }
}

.edit-dialog {
  .el-dialog__header {
    padding: 0;
  }
}
</style>
